<template>
    <section class="content">
        <div class="content-detail">
            <comp-detail :item="item" :id="id"></comp-detail>
            <div class="menuItem">
                <router-link :to="{name:'eventIntroduction'}" active-class="active-class-bg">{{ $t('langObj.comeptitonDesc') }}</router-link>
                <router-link :to="{name:'eventData'}" active-class="active-class-bg">{{ $t('langObj.titleData') }}</router-link>
                <router-link :to="{name:'eventDiscuss'}" active-class="active-class-bg">讨论</router-link>
                <router-link :to="{name:'eventGrade'}" active-class="active-class-bg">{{ $t('langObj.myScore') }}</router-link>
                <router-link :to="{name:'eventGroup'}" active-class="active-class-bg">{{ $t('langObj.myGroup') }}</router-link>
                <router-link :to="{name:'eventRank'}" active-class="active-class-bg">{{ $t('langObj.rank') }}</router-link>
            </div>
            <router-view :id="id" class="routerView"></router-view>
        </div>
    </section>
</template>

<script>
import compDetail from '@/components/competitions/compDetail';
import { mapActions } from 'vuex';
export default {
    components:{ compDetail },
    props:['id'],
    data(){
        return{
            item:{},
        }
    },
    methods: {
        ...mapActions(['XcompetitionDetail','XgetMyGroup'])
    },
     mounted(){
        // 提交文件需要group_id
        this.XgetMyGroup(this.id);
        this.XcompetitionDetail(this.id).then(res => {
            this.item = res.data;
        });
    },
}
</script>

<style lang="scss" scoped>
    .content{
        width: 100%;
        height: 100%;
        background-color:#f9fafa;
    }
    .content-detail{
        width:1200px;
        height: 100%;
        margin: 0 auto;
        padding: 16px 0;
        display: flex;
        flex-direction: column;
        .menuItem {
            background-color: #fff;
            height: 80px;
            a{
                color:#333;
                display: inline-block;
                line-height: 80px;
                padding:0 30px;
                &:hover{
                    color:#C2142F !important;
                    border-bottom: 4px solid #C2142F;
                }
            }
        }
        .routerView{
            margin-top:20px;
            background-color: #fff;
        }
    }
        
</style>
